<template>
  <div>
    <ul>
      <li>{{ state.a }}</li>
      <li>{{ state.gf.b }}</li>
      <li>{{ state.gf.f.c }}</li>
      <li>{{ state.gf.f.s.d }}</li>
    </ul>
    <button @click="addFn">点击</button>
  </div>
</template>
<script>
import { ref, reactive, shallowReactive } from "vue";
export default {
  // 递归监听
  setup() {
    /**
     * 像state这种数据结构使用reactive来创建的话
     * 会非常消耗性能 vue会将所有state中的数据进行递归监听
     *
     */
    // 使用ref创建的数据他的数据值是在state对象中value值得下面
    const state = ref({
      // const state = reactive({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    });
    function addFn() {
      // 访问reactive创建的值可以直接进行访问
      // state.a = 1;
      // state.gf.b = 2;
      // state.gf.f.c = 3;
      // state.gf.f.s.d = 4;
      // 访问ref创建的值需要添加value属性进行访问
      state.value.a = 1;
      state.value.gf.b = 2;
      state.value.gf.f.c = 3;
      state.value.gf.f.s.d = 4;
    }
    return {
      addFn,
      state,
    };
  },
};
</script>
